<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Knattertron</title>
    <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">	
    <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
    <link rel="stylesheet" href="css/common.css" type="text/css" media="screen, projection">
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script>
      var _G = {
        checkUsernameTimeout: 500
      }
    
      $(function() {

        // As the visitor is typing the suername, check if it's known as a registered one.
        // If it is, show the password field aswell and inform the user that he acn't use it as a guest name
        var checkUsername;
        $("#playername").bind("keypress click focus blur change", function(e) {
          if(e.which == 8 || /[a-zA-Z0-9_-]/.test(String.fromCharCode(e.which)))
          {            
            clearTimeout(checkUsername);
            
            if($("#passwordBox").is(":visible"))
              $("#passwordBox").hide();
            
            checkUsername = setTimeout(isUsernameRegistered, _G.checkUsernameTimeout); 
          }
        });
        
        // EOA
        $("#playername").focus();
        isUsernameRegistered();
        
        // Handle form submits. Before submitting, make sure a password is filled in if the playername is known
        $("#frmLogin").submit(submitLogin);
      });
      
      function isUsernameRegistered(blocking) {
        if(blocking)
          $.ajaxSetup({async: false});
      
        $.get("/login/check", {playername: $("#playername").val()}, function(data) {
          if(data.exists)
            $("#passwordBox").slideDown();
        }, "json");
        

        if(blocking)
          $.ajaxSetup({async: true});
      }
      
      function submitLogin() {
        isUsernameRegistered(true);
        
        // Clientside error checking
        var errors = []
        if($("#playername").val().length < 4)
        {
          errors.push("The player name you choose is to short.");
          $("#playername").focus();
        }
        if($("#password").is(":visible") && $("#password").val().length < 6)
        {
          errors.push("The password you entered is to short.");
          $("#password").focus();
        }
          
        // Display errors
        if(errors.length)
        {
          var msg = "Login failed:\n\n";
          for(var i in errors)
            msg += errors[i] + "\n";
            
          alert(msg);
        }
        else
        {
          // Try to authenticate
          $.post("/login", $("#frmLogin").serialize(), function(data) {
            if(data.success)
              window.location.href = "queue.html";
            else if(data.error)
              log.error("Failed to login:\n\n" + data.message);
            else
              log.error("Failed to login:\n\nUnnown server response received during login attempt.");
          }, "json");
        }
          
        return false;
      }
    </script>    
  </head>
  <body>
    <div class="container">  
      <div class="span-24 last lblTitle prepend-bottom prepend-top">Knattertron</div>
      <div class="span-24 last prepend-bottom prepend-top">&nbsp;</div>
      <div class="span-8">&nbsp;</div>
      <div class="span-8 prepend-top">
        <form action="" method="POST" id="frmLogin">
          <div class="span-8 last lblLoginName">Player/Guest name</div>
          <div class="span-8 last"><input type="text" id="playername" name="playername" class="inputText" style="background-color: #398238" tabindex="1"></div>
          <div class="span-8 last hide" id="passwordBox">
            <span class="lblPassInfo">
              The player name you choose is a registered and can't be used as a guest. If you registered the player name enter your password to continue.
            </span>
            <input type="password" id="password" name="password" class="inputText inputPass" style="background-color: #833938" tabindex="2">
          </div>
          <div class="span-4">&nbsp;</div>
          <div class="span-4 last"><input type="submit" id="start" class="btnStart" value="Start" tabindex="3"></div>
        </div>
        <div class="span-8 last">&nbsp;</div>
      </form>
    </div>
  </body>
</html>